<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>后台-添加文章</title>

    <link rel="shortcut icon" th:href="@{/image/favicon.ico}" type="image/x-icon"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/materialdesignicons.min.css}" rel="stylesheet">
    <link th:href="@{/css/style.min.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/js/jconfirm/jquery-confirm.min.css}">
    <!-- 引入 css -->
    <link th:href="@{/wangEditor/style.css}" rel="stylesheet" type="text/css">
    <!--标签插件-->
    <link rel="stylesheet" th:href="@{/js/jquery-tags-input/jquery.tagsinput.min.css}">

    <style type="text/css">
        #editor-wrapper {
            z-index: 100;
            border: 1px solid #0FB25F;
        }
    </style>
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">

        <div th:replace="comm/WL2022-CommAdmin :: #commLeftNavigation"></div>
        <div th:replace="comm/WL2022-CommAdmin :: #commHeader"></div>

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">

                                <form th:action="@{/root/add}" method="post" enctype="multipart/form-data" id="myForm"
                                      class="row">
                                    <div class="form-group col-md-12">
                                        <label for="title">标题</label>
                                        <input type="text" name="title" id="title" class="form-control" value=""
                                               maxlength="15" placeholder="博客标题（必填！15字内）">
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label for="createBy">作者（默认为用户昵称）</label>
                                        <input type="text" name="createBy" class="form-control" id="createBy"
                                               value="吴哒哒" maxlength="10" placeholder="作者">
                                    </div>

                                    <div class="form-group col-md-12">
                                        <label for="summary">博客描述</label>
                                        <textarea id="summary" class="form-control" name="summary"
                                                  maxlength="200" value="" placeholder="博客描述（必填！200字内）..." rows="5"
                                                  style="resize: none"></textarea>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label for="headImage">文章头图片（默认为下图）</label>
                                        <div class="form-controls">
                                            <ul class="list-inline clearfix lyear-uploads-pic">
                                                <li class="col-xs-4 col-sm-3 col-md-2">
                                                    <img th:src="@{/image/articleImages/c7044c1e-61f4-4662-b735-858644c25d20.jpg}" alt="默认和平" id="image">
                                                </li>
                                                <li class="col-xs-4 col-sm-3 col-md-2">
                                                    <a class="pic-add" id="add-pic-btn" title="点击上传"
                                                       onclick="addImage()"></a>
                                                    <input type="file" name="image"  id="headImage"
                                                           onchange="addHeadImage(this)" style="display: none;">
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <label for="articleType">类型</label>
                                        <div class="form-controls">
                                            <select name="articleType" class="form-control" id="articleType"  >
                                                <option th:each="byType:${categoryNavigation}" th:value="${byType.id}" >[[${byType.articleType}]]</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-12" id="quoteLink">
                                        <label for="quoteLink">状态</label>
                                        <div>
                                            <label class="lyear-radio radio-inline radio-primary">
                                                <input type="radio" name="quoteLink" value="me"
                                                       onchange="t1(this)" checked><span>原创</span>
                                            </label>
                                            <label class="lyear-radio radio-inline radio-primary">
                                                <input type="radio" name="quoteLink" value="notMe"
                                                       onchange="t2(this)"><span>转载</span>
                                            </label>
                                            <input id="quoteLinkText" name="quoteLinkText" type="text"
                                                   placeholder="请输入引用链接"
                                                   style="height: 30px;width: 250px;display: none"
                                                   class="form-control"/>
                                        </div>
                                    </div>

                                    <div class="form-group col-md-12">
                                        <label for="editor-content-textarea">文章内容(内容过多建议打开全屏)</label>
                                        <div class="page-right" style="display: flex;">
                                            <!-- 编辑器 DOM -->
                                            <div style="border: 1px solid #ccc; flex: 1" id="editor-wrapper">
                                                <div id="editor-toolbar" style="border-bottom: 1px solid #ccc;">
                                                </div>
                                                <div id="editor-text-area" style="height: 350px"></div>
                                                <textarea id="editor-content-textarea" style="display: none"
                                                          name="articleContent" readonly></textarea>
                                            </div>
                                            <!-- 标题目录 -->
                                            <div style="width: 200px; background-color: #f1f1f1;">
                                                <ul id="header-container"></ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group col-md-12">
                                        <button type="button" class="btn btn-primary" onclick="checkForm();">提交</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" th:src="@{/js/jquery-3.6.0.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/perfect-scrollbar.min.js}"></script>
<script type="text/javascript" th:src="@{/js/main.min.js}"></script>
<script th:src="@{/js/jconfirm/jquery-confirm.min.js}" type="text/javascript"></script>

<!--标签插件-->
<script th:src="@{/js/jquery-tags-input/jquery.tagsinput.min.js}"></script>
<!-- 引入 js -->
<script th:src="@{/wangEditor/index.js}"></script>

<script type="text/javascript">
    function addImage() {
        $("#headImage").click();
    }

    //选择文件完毕的回调
    function addHeadImage(obj) {
        const file = obj.files[0];
        console.log(file);
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
            $("#image").attr("src", this.result);
        }
    }
</script>
<!--控制引用链接输入框-->
<script type="text/javascript">
    function t1(obj) {
        let val = $("input[name='quoteLink']:checked").val();
        if (val === "me") {
            $("#quoteLinkText").css('display', 'none');
        }
    }

    function t2(obj) {
        let val = $("input[name='quoteLink']:checked").val();
        if (val === "notMe") {
            $("#quoteLinkText").css('display', 'inline');
        }
    }
</script>
<!-- WangEdit的设置 -->
<script>
    const E = window.wangEditor
    // 标题 DOM 容器
    const headerContainer = document.getElementById('header-container')
    headerContainer.addEventListener('mousedown', event => {
        if (event.target.tagName !== 'LI') return
        event.preventDefault()
        const id = event.target.id
        editor.scrollToElem(id) // 滚动到标题
    })
    window.editor = E.createEditor({
        selector: '#editor-text-area',
        config: {
            placeholder: '请输入文章内容...',
            MENU_CONF: {
                uploadImage: {
                    base64LimitSize: 10 * 1024 * 1024 // 10M 以下插入 base64
                }
            },
            onChange(editor) {
                document.getElementById('editor-content-textarea').value = editor.getHtml();
                const headers = editor.getElemsByTypePrefix('header')
                headerContainer.innerHTML = headers.map(header => {
                    const text = E.SlateNode.string(header)
                    const {
                        id,
                        type
                    } = header
                    return `<li id="${id}" type="${type}">${text}</li>`
                }).join('')
            }
        }
    })
    window.toolbar = E.createToolbar({
        editor,
        selector: '#editor-toolbar',
        config: {}
    })
</script>
<!--提交表单时的数据校验-->
<script>
    function checkForm() {
        /*获取title*/
        const title = fucking('title').value;
        if (CheckNull(title)) {
            $.alert('标题不能为空');
            return;
        }
        /*获取createBy*/
        const createBy = fucking('createBy').value;
        if (CheckNull(createBy)) {
            $.alert('作者不能为空');
            return;
        }
        /*获取summary*/
        const summary = fucking('summary').value;
        if (CheckNull(summary)) {
            $.alert('文章概述不能为空');
            return;
        }
        /*获取articleContent*/
        const articleContent = fucking('editor-content-textarea').value;
        if (articleContent === '<p><br></p>') {
            $.alert('文章内容不能为空');
            return;
        }
        /*提交表单*/
        fucking('myForm').submit();
        $.alert('提交成功');
    }
    //将判断输入内容不为空封装为一个函数
    function CheckNull(str) {
        return str == null || str.trim() === "";
    }

    //将document.getElementById方法进行封装
    function fucking(id) {
        return document.getElementById(id);
    }
</script>

</body>
</html>
